<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <p>父组件传递给子组件参数示例：</p>
  <child :msg="msg" :run="run" :app="this"></child>
</div>
</body>
<script type="text/javascript">

var Child = Vue.extend({
    template:'<div>{{msg}}<br/><hr/><button @click="run(\'123\')">执行父组件的方法</button><hr/><button @click="getParent()">调用整个父组件</button></div>',
    props:['msg','run','app'],
    methods:{
      getParent(){
        this.app.run('456');
      }
    }
  });
  new Vue({
    el:'#app',
    data(){
      return{
        msg:'来自父组件的参数'
      }
    },
    components:{
      'child':Child
    },methods: {
      run(data){
        alert('执行了父组件的方法'+data);
      }
    }
  })
    </script>
</html>
